<template>
    <div class="search">
        <div class="search-box">
            <van-search v-model="value" shape="round" background="#fbfbfb" show-action placeholder="请输入搜索关键词"
                @input="inputHandle">
                <template #action>
                    <div @click="goback">取消</div>
                </template>
            </van-search>
        </div>
        <div class="search-list">
            <div class="list-item" v-for="(item,index) in productslist" @click="goDetail(item.pid)">
                <img class="item-img" :src="item.smallImg" alt="item.name">
                <div class="item-name">
                    <div class="zhname">{{item.name}}</div>
                    <div class="enname">{{item.enname}}</div>
                </div>
                <div class="item-price">￥{{item.price}}</div>
            </div>
        </div>
    </div>
</template>
<script>
    import '../assets/scss/Search.scss';

    export default {
        name: 'Search',
        data() {
            return {
                value: '',
                inputMsg: false,
                productslist: []
            }
        },
        methods: {
            goback() {
                this.$router.go(-1);
            },
            inputHandle(v) {
                // console.log(v.length);
                if (!v.length) return;
                this.axios({
                    method: 'GET',
                    url: '/search',
                    params: {
                        appkey: this.appkey,
                        name: v
                    }
                }).then(result => {
                    console.log(v, "==>", result);
                    if (result.data.code === "Q001") {
                        this.productslist = result.data.result;
                    }
                }).catch(err => {
                    console.log(err);
                })
            },
            // 跳转至详细页面
            goDetail(pid) {
                console.log('goggo');
                this.$router.push({
                    name: 'Detail',
                    params: {
                        pid
                    }
                });
            },
        },
    }
</script>